<template>
  <div
    class="flex transition border-2 border-solid border-[#41b080] focus-within:shadow"
    :class="{ 'border-red': todoState.invalid }"
  >
    <input
      class="flex-1 py-2 px-2 border-none focus:outline-none"
      type="text"
      v-model="todoState.title"
    />
    <button class="py-2 px-4 border-none" @click="createTodo">创建</button>
  </div>
  <p class="mt-2 text-xs text-center text-red" v-show="todoState.invalid">{{ todoState.errMsg }}</p>
</template>

<script setup lang="ts">
const emit = defineEmits(['create-todo'])

const todoState = reactive({
  title: '',
  invalid: false,
  errMsg: ''
})

const createTodo = () => {
  todoState.invalid = false
  if (todoState.title !== '') {
    emit('create-todo', todoState.title)
    todoState.title = ''
    return
  }
  todoState.invalid = true
  todoState.errMsg = '待办事项不能为空！'
}
</script>
